{extend name="common" /}
{block name='content'}
<div class="padding-big background-color">

    <!-- TAB NAVIGATION -->
    <ul class="nav nav-tabs" role="tablist">
        <li ><a href="{:url('admin/goods/index')}">商品列表</a></li>
        <li class="active"><a href="#">添加/编辑</a></li>
    </ul>
    <hr>
    <!-- TAB CONTENT -->
    <div class="tab-content container" style="width: 90%">
         <form action="{:url('admin/goods/update',['id'=>$oldData['gid']])}" method="post">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title ">商品种类</h1>
                </div>
                <div class="panel-body">

                    <div class="form-group">
                        <label >商品名称</label>
                            <input type="text" class="form-control" name="gname" value="{$oldData['gname']}">
                    </div>
                    <div class="form-group">
                        <label >商品分类</label>
                        <select name="pid" id="inputID" class="form-control">
                            <option value=""> -- 选择商品分类 --</option>
                            {foreach name='cData' item='v'}
                             <option {if condition="$v.cid == $oldData['pid']"} selected {/if} value="{$v['cid']}">{$v['_catname']}</option>
                            {/foreach}
                        </select>
                    </div>
                    <div>
                        <label>商城价格</label>
                        <input type="text" class="form-control" name="gprice" value="{$oldData['gprice']}">
                    </div>
                    <div>
                        <label>市场价格</label>
                        <input type="text" class="form-control" name="mprice" value="{$oldData['mprice']}">
                    </div>
                    <div>
                        <label>商品描述</label>
                        <textarea class="form-control" name="description" cols="30" rows="3 " maxlength="255" placeholder="最长不超过255个字符">{$oldData['description']}</textarea>
                    </div>

                    <div class="form-group">
                        <label >商品图集</label>

                        <!--缩略图使用框架的单图上传组件-->
                        <div>
                            <div class="input-group">
                                <input type="text" class="form-control" name="atlas" value="{$oldData['atlas']}" >
                                <div class="input-group-btn">
                                    <button onclick="upImage1(this)" class="btn btn-default" type="button">选择图片</button>
                                </div>
                            </div>
                            <div class="input-group" style="margin-top:5px;">
                                <img src="__ZY__/node_modules/hdjs/images/nopic.jpg" class="img-responsive img-thumbnail1" width="150">
                                <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="removeImg1(this)">×</em>
                            </div>
                        </div>
                        <script>
                            //上传图片

                            function upImage1(obj) {
                                require(['util'], function (util) {
                                    options = {
                                        multiple: true,//是否允许多图上传
                                        //data是向后台服务器提交的POST数据
                                        data:{name:'后盾人',year:2099}
                                    };

                                    util.image(function (images) {          //上传成功的图片，数组类型
                                        url = images.join('|');

                                        $("[name='atlas']").val(url);
                                        $(".img-thumbnail1").attr('src', images[0]);
                                    }, options)
                                });
                            }

                            //移除图片
                            function removeImg1(obj) {
                                $(obj).prev('img').attr('src', 'resource/images/nopic.jpg');
                                $(obj).parent().prev().find('input').val('');
                            }
                        </script>

                    </div>

                    <div class="form-group">
                        <label >商品详情</label>
                        <textarea name="details" id="container" style="height:300px;width:100%;">{$oldData['details']}</textarea>
                        <script>
                            util.ueditor('container', {hash:2,data:'hd'}, function (editor) {
                                //这是回调函数 editor是百度编辑器实例
                            });
                        </script>
                    </div>


                    <div class="form-group">
                        <label>商品预览图</label>
                        <!--缩略图使用框架的单图上传组件-->
                        <div>
                            <div class="input-group">
                                <input type="text" class="form-control" name="cover" readonly value="{$oldData['cover']}">
                                <div class="input-group-btn">
                                    <button onclick="upImage(this)" class="btn btn-default" type="button">选择图片</button>
                                </div>
                            </div>
                            <div class="input-group" style="margin-top:5px;">
                                <img src="{$oldData['cover']}" class="img-responsive img-thumbnail" width="150">
                                <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="removeImg(this)">×</em>
                            </div>
                        </div>
                        <script>
                            //上传图片
                            function upImage(obj) {
                                require(['util'], function (util) {
                                    options = {
                                        multiple: false,//是否允许多图上传
                                        //data是向后台服务器提交的POST数据
                                        data:{name:'后盾人',year:2099}
                                    };
                                    util.image(function (images) {          //上传成功的图片，数组类型

                                        $("[name='cover']").val(images[0]);
                                        $(".img-thumbnail").attr('src', images[0]);
                                    }, options)
                                });
                            }

                            //移除图片
                            function removeImg(obj) {
                                $(obj).prev('img').attr('src', 'resource/images/nopic.jpg');
                                $(obj).parent().prev().find('input').val('');
                            }
                        </script>

                    </div>
                    <div class="form-group">
                        <label>查看次数</label>
                        <input type="number" name="click" class="form-control" value="{$oldData['click']}">
                    </div>
                </div>
            </div>

             <div class="panel panel-default">
                 <div class="panel-heading">
                     <h3 class="panel-title">商品分类</h3>
                 </div>
                 <div class="panel-body" id="app">

                     <div class="panel panel-default" v-for="(v,k) in subclass">
                         <div class="panel-body">
                             <div class="form-group">
                                 <label >货品属性</label>
                                 <input type="text" class="form-control" v-model="v.sname">
                             </div>
                             <div class="form-group">
                                 <label >货品数量</label>
                                 <input type="number" class="form-control" v-model="v.snum">
                             </div>
                             <div class="form-group">
                                 <div >
                                     <button type="submit" class="btn btn-danger" @click.prevent="del(k)">删除</button>
                                 </div>
                             </div>
                         </div>
                     </div>

                     <textarea name="subclass"   hidden>{{subclass}}</textarea>

                     <div class="panel-footer">
                         <button type="submit" @click.prevent="add" class="btn btn-info">增加</button>

                     </div>
                 </div>
             </div>

            <button type="submit" class="btn btn-primary">保存</button>
            </form>

        </div>
    </div>
<script>
    require(['vue'],function (Vue) {
        new Vue({
            el:'#app',
            data:{
                // videos:JSON.parse('{!! $videos !!}')
                subclass:JSON.parse('{$oldSub}')
            },
            methods:{
                add(){
                    // id 防止重复
                    let field = {'sname':'',snum:0};
                    this.subclass.push(field);
                },
                del(k){
                    if(confirm('确定要删除吗')){
                        this.subclass.splice(k,1);
                    }
                }
            }
        })
    })
</script>
{/block}